<template>
  <AdTable v-bind="tableConfig" ref="tableRef" v-model="models">
    <AdForm v-bind="fromConfig" v-model="models"></AdForm>
  </AdTable>
</template>
<script lang="ts" setup>
import type { AdFormPorps, AdTablePorps, AdTableInstance } from '@fe-hl/admin-design-vue';
import { reactive, ref } from 'vue';
import data from './data';

interface Models {
  keyword: string;
  mercId: string;
  status: string;
}
const models = ref<Models>();
const fromConfig: AdFormPorps<Models> = reactive({
  components: [
    {
      model: 'keyword',
      components: 'el-input',
      props: {
        label: '关键字',
      },
    },
    {
      model: 'mercId',
      components: 'el-input',
      props: {
        label: '商户号',
      },
    },
    {
      model: 'status',
      components: 'el-select',
      subComponents: 'el-option',
      options: [
        {
          label: '启用',
          value: '1',
        },
        {
          label: '禁用',
          value: '0',
        },
      ],
      props: {
        label: '状态',
      },
    },
  ],
  submit: () => {
    return tableRef.value?.fetchData({ isResetPageNumber: true });
  },
});

const tableRef = ref<AdTableInstance>();
const tableConfig = ref<AdTablePorps>({
  api: () => Promise.resolve(data), // 模拟ajax请求
  headerAction: [
    {
      actionName: '新增',
      actionType: 'add',
    },
    {
      actionName: '修改',
      actionType: 'update',
      effect: 'one',
    },
    {
      actionName: '批量操作',
      actionType: 'batch',
      effect: 'more',
    },
  ],
  columns: [
    { type: 'selection' },
    { type: 'index' },
    { label: '一级项目编码', prop: 'code', width: 200, showOverflowTooltip: true },
    { label: '一级项目名称', prop: 'name', width: 200, showOverflowTooltip: true },
    { label: '行业', prop: 'industryName', width: 150, showOverflowTooltip: true },
    { label: '是否Top项目', prop: 'topFlagName', width: 150 },
    { label: '是否战略项目', prop: 'strategicFlagName', width: 180 },
    { label: '备注', prop: 'remark', width: 150, showOverflowTooltip: true },
    { label: '创建人', prop: 'createBy', width: 150 },
  ],
});
</script>
